<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit" />
    <title>环贸ICD</title>
    <link href="style/index.css" rel="stylesheet" type="text/css"/>
    <link href="style/phone.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="script/wow/animate.min.css">
    <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
</head>

<body>
<div class="loading">
    <div class="container">
        <div class="img">
            <div><img src="image/img530.jpg" alt=""></div>
        </div>
        <div class="line"><i></i></div>
        <a href="javascript:;" class="btn">立即进入</a>
    </div>
</div>

<div class="g-head">
    <div class="wal">
        <a href="" class="logo"></a>
        <a href="javascript:;" class="navA"></a>
        <div class="g-nav">
            <ul>
                <li><a href="" class="name">主页</a></li>
                <li><a href="" class="name">精彩活动</a></li>
                <li><a href="" class="name on">零售业态</a></li>
                <li><a href="" class="name">餐饮业态</a></li>
                <li><a href="" class="name">生活业态</a></li>
                <li><a href="" class="name">礼宾服务</a></li>
                <li><a href="" class="name">关于项目</a></li>
            </ul>
        </div>
        <div class="side">
            <ul class="btn">
                <li><a href="javascript:;" class="on" id="audio"><img src="image/img43_1.png" alt=""><img src="image/img43_1on.png" alt=""></a><audio id="myAudio" src="image/icd.mp3" autoplay></audio></li>
                <li class="search">
                    <a href="javascript:;"><img src="image/img43_2.png" alt=""></a>
                    <div class="form">
                        <div class="input"><input type="text"></div>
                        <div class="submit"><input type="button" value=""></div>
                    </div>
                </li>
                <li><a href=""><img src="image/img43_3.png" alt=""><img src="image/img43_3on.png" alt=""></a></li>
                <li><a href=""><img src="image/img43_4.png" alt=""><img src="image/img43_4on.png" alt=""></a></li>
            </ul>
            <dl class="btn">
                <dd><a href="" class="on">简体</a></dd>
                <dd><a href="">繁体</a></dd>
                <dd><a href="">EN</a></dd>
            </dl>
        </div>
    </div>
</div>

<div class="p-banner" id="p-banner">
    <div class="bg" style="background-image: url('image/p-banner.jpg')"></div>
    <div class="wal">
        <div class="title">
            <h2>零售业态</h2>
            <i class="i-1"></i>
            <i class="i-2"></i>
            <i class="i-3"></i>
            <i class="i-4"></i>
            <i class="i-5"></i>
            <i class="i-6"></i>
        </div>
        <div class="form">
            <div class="input"><input type="text" value="商户关键词"></div>
            <div class="submit"><input type="button" value=""></div>
        </div>
    </div>
</div>
<script src="script/TweenMax.min.js"></script>
<script>
    function pageBannerFun() {
        var dom = $('.p-banner'),
            tm = new TimelineMax();

        tm.fromTo(dom.find('.title'), 1, {opacity:0}, {opacity:1});
        dom.find('.title i').each(function (i) {
            tm.fromTo($(this), 1.5, {scale:0}, {scale:1, ease: Bounce.easeOut}, "-=0.9");

            if(i!==0){
                var time = Math.floor(Math.random() * 3) + 1;
                new TweenMax($(this), time, {
                    y: function (i) {
                        return -5 * time
                    },
                    startAt: {y: 5},
                    ease: Linear.easeOut,
                    repeat: -1,//--重复无限次
                    yoyo: true//--是否反向
                })
            }
        })
    }
</script>

<div class="shop-nav">
    <div class="list">
        <ul>
            <li><a href="" class="on">所有商戶</a></li>
            <li><a href="">艺术品</a></li>
            <li><a href="">家居佈置</a></li>
            <li><a href="">童装玩具</a></li>
            <li><a href="">护理美容</a></li>
            <li><a href="">珠宝饰物</a></li>
            <li><a href="">女士时装</a></li>
            <li><a href="">男士时装</a></li>
            <li><a href="">运动用品</a></li>
        </ul>
    </div>
    <a href="" class="btn">楼层导视</a>
</div>
<div class="shop-list">
    <ul>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_1.png" alt=""></div>
                <div class="name">Chanel<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_2.png" alt=""></div>
                <div class="name">Moynat paris<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_3.png" alt=""></div>
                <div class="name">MUJI 无印良品<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_4.png" alt=""></div>
                <div class="name">ZARA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_5.png" alt=""></div>
                <div class="name">FENDI ROMA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_6.png" alt=""></div>
                <div class="name">良品铺子<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_1.png" alt=""></div>
                <div class="name">Chanel<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_2.png" alt=""></div>
                <div class="name">Moynat paris<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_3.png" alt=""></div>
                <div class="name">MUJI 无印良品<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_4.png" alt=""></div>
                <div class="name">ZARA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_5.png" alt=""></div>
                <div class="name">FENDI ROMA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_6.png" alt=""></div>
                <div class="name">良品铺子<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_1.png" alt=""></div>
                <div class="name">Chanel<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_2.png" alt=""></div>
                <div class="name">Moynat paris<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_3.png" alt=""></div>
                <div class="name">MUJI 无印良品<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_4.png" alt=""></div>
                <div class="name">ZARA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_5.png" alt=""></div>
                <div class="name">FENDI ROMA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_6.png" alt=""></div>
                <div class="name">良品铺子<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_5.png" alt=""></div>
                <div class="name">FENDI ROMA<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
        <li class="wow fadeInUp">
            <a href="">
                <div class="img"><img src="image/img260_6.png" alt=""></div>
                <div class="name">良品铺子<br>L2, 225</div>
                <div class="msg">春装上市 全享7.5折</div>
            </a>
        </li>
    </ul>
    <div class="p-more"><a href="javascript:;">查看更多</a></div>
</div>
<script>
    $(function () {
        var dom = $('.shop-list'),
            html = [],
            nav = $('.shop-nav li');

        nav.each(function (i) {
            html.push(dom.find('ul').html());
            dom.find('li').each(function (j) {
                if (j < 2) {
                    $(this).remove()
                }
            });
            //----
            $(this).find('a').click(function () {
                change(i);
                return false
            })
        });

        var curr = 0;
        change(curr);
        function change(i){
            curr = i;
            nav.find('a').removeClass('on');
            nav.eq(i).find('a').addClass('on');
            dom.find('ul').html("").append(html[curr]);
            dom.find('li:last').addClass('liLast');
            $('body,html').stop(true, true).animate({scrollTop: $('.shop-nav').offset().top - $('.p-banner').height()}, 500)
        }

        $('.p-more a').click(function () {
            dom.find('ul').append(html[curr]);
            $('body,html').stop(true, true).animate({scrollTop: dom.find('li.liLast').offset().top}, 500);
            dom.find('li').removeClass('liLast');
            dom.find('li:last').addClass('liLast')
        })
    })
</script>

<div class="shop-foot">
    <div class="wal">
        <div class="title">了解精彩纷呈的环贸iCD</div>
        <div class="p-more"><a href="">查看更多</a></div>
    </div>
</div>

<div class="g-foot">
    <div class="list"><a href="">联系我们</a>/<a href="">加入我们</a>/<a href="">免责声明</a></div>
    <div class="col">
        <p>Copyright © 2020 祥宝投资（成都）有限公司</p>
        <p>All Rights Reserved   Power by GuideBrand</p>
    </div>
</div>
</body>
</html>

<script type="text/javascript" src="script/js.js"></script>
<link rel="stylesheet" href="script/swiper/swiper-3.4.2.min.css">
<script type="text/javascript" src="script/swiper/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="script/wow/wow.min.js"></script>
<script>
    $(function () {
        new WOW().init()
    })
</script>